<template>
    <div>
        <van-search
        v-model="value"
        shape="round"
        background="#ffffff"
        @click="search()"
        placeholder="请输入搜索关键词"
      />

      <transition name="van-slide-right">
        <router-view></router-view>
    </transition>
      <van-sidebar id="left" v-model="activeKey" @change="onChange" >
        <van-sidebar-item @click="lujing(item.id)" :title="item.name" v-for="item in fenleishuju" :key="item.id" />
 
    </van-sidebar>
    <div id="right" >
        <div id="mchz">
            <van-image id="mengceng"
            width="295px"
            height="170px"
            radius="10px"
            :src="flxx.banner_url"
          />
          
        </div>
        <p id="tulidezi">{{flxx.front_name}}</p>
        <p id="title">{{flxx.name}}
            
        </p>
        <!-- <div>
        <img :src="flxx.wap_banner_url" alt="">
        </div> -->
        <!-- <div id="right">    
             
        </div> -->
        <!-- <van-grid :border="false" :column-num="3">
            <van-grid-item>
              <van-image id="tupian" src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            </van-grid-item>
          
          </van-grid> -->
    </div>
 
    <v-slot></v-slot>
    </div>
</template>

<script>
import vSlot from '../components/dibu.vue'
import {Getfenlei,Getdqfenlei} from '../request/app.js'
export default {
    data() {
        return {
            value:'',
            activeKey:'',
            fenleishuju:[],
            flxx:{}
        };
    },
    components:{
        vSlot
    },
    created(){
        Getfenlei().then(res=>{
            // console.log(res);
            this.fenleishuju = res.data.categoryList
        })
        let {id} = this.$route.params
     
        Getdqfenlei(id).then(res=>{
            // console.log(res);
            this.flxx = res.data.currentCategory
        })
    },
    mounted() {
        
    },

    methods: {
        onChange(){

        },
        lujing(id){
            this.$router.replace('/fenlei/'+id)
            Getdqfenlei(id).then(res=>{
            // console.log(res);
            this.flxx = res.data.currentCategory
        })
        },
        search(){
            // console.log(1);
            this.$router.push('/index/popup')
        }
    },
};
</script>

<style scoped>
    #left{
        float: left;
    }
    #right{
        float: right;
    }
    #mchz{
        width: 295px;
        height: 170px;
        background:#000 ;
        border-radius: 10px;
        margin-left: 80px;
        margin-top: -530px;
    }
    #mengceng{
        opacity: 0.6;filter: alpha(opacity=60);
    }
    #tulidezi{
        color: rgb(255, 255, 255);
        margin-top:-100px ;
        margin-left: 180px;
    }
    #leibie{
        

        color: #000;
    }
    #title{
         margin-top:100px ;   
         margin-left: 200px;
    }
    #tupian{
    
        width: 50px;
        
    }
</style>